﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名版</title>
    <script src="../Scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../Scripts/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/QueryString.js"></script>
    <script type="text/javascript" src="../Scripts/config.js"></script>
    <script type="text/javascript" src="../Comm/Gener.js"></script>
    <script src="../Scripts/jq-signature.min.js" type="text/javascript"></script>
    <script src="../Scripts/jq-signature.js" type="text/javascript"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            *zoom: 1;
        }

        .wapr_nav {
            border-bottom: 2px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .wapr_nav_left {
            margin: 10px 0;
            padding: 0 10px;
            font-size: 13px;
            color: #333;
            text-align: center;
            line-height: 30px;
            border-right: 1px solid #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
        }

        .wapr_nav_left > span {
            height: 16px;
        }


       .wapr_nav_left > input {
            display: none;         
       }

        .wapr_nav_right {
            float: right;
            margin: 10px 0;
            padding: 0 20px;
            font-size: 15px;
            color: #333;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .wapr_nav_left_img1 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/1.png) no-repeat;
        }

        .wapr_nav_left_img2 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/2.png) no-repeat;
        }

        .wapr_nav_left_img3 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/3.png) no-repeat;
        }

        .wapr_nav_left_img4 {
            display: block;
            width: 20px;
            height: 15px;
            background: url(Img/4.png) no-repeat;
        }

        .wapr_nav_left_img6 {
            display: block;
            width: 20px;
            height: 16px;
            background: url(Img/6.png) no-repeat;
        }

        .qudiao {
            margin-left: 12px;
            border-right: none;
        }

        .qianziban {
        }

        #addImg {
            position: relative;
        }

        html, body {
            -ms-overflow-style: scrollbar;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="wapr" id="sxb" style="height: 100%">
        <div class="wapr_nav clearfix" id="button">
            <div id="saveBtn" onclick="saveSignature();" class="wapr_nav_left"><span class="wapr_nav_left_img1"></span>确定</div>
            <div id="addImg" onclick="AddImg()" class="wapr_nav_left">
                <span class="wapr_nav_left_img2"></span>插入
            </div>
            <div id="clr" val="0" onclick="clearsame()" class="wapr_nav_left"><span class="wapr_nav_left_img6"></span><div id="xpc">橡皮擦</div></div>
            <div id="clearBtn" onclick="clearCanvas(1)" class="wapr_nav_left"><span class="wapr_nav_left_img3"></span>重置</div>
            <div val="0" style="margin-top:14px;padding-right:0px;" class="wapr_nav_left qudiao">粗细</div>
            <div val="0" class="wapr_nav_left qudiao">
                <select class="form-control" onchange="setfont()" id="select-font-size">
                    <option style="font-size:16px" value="2">细</option>
                    <option style="font-size:16px" value="5" selected="selected">中</option>
                    <option style="font-size:16px" value="8">粗</option>
                </select>
            </div>
            <input id="inputImg" type="file"  style="display: none"/>
        </div>
        <div id="signature" class="js-signature" data-border="0px solid black" data-line-color="#bc0000" data-auto-fit="true" style="overflow:auto;">
        </div>
    </div>
    <script type="text/javascript">
        $(window).resize(function () {
            // 变化后需要做的事
            var canvawidth = document.getElementById("signature").offsetWidth;
            var canvaheight = document.getElementById("signature").offsetHeight;
            var iframe = $($(".layui-layer-content", parent.document)[0]).find("iframe")[0];
            //console.log( )
            document.body.style.height = iframe.offsetHeight + "px";
            document.getElementById("signature").style.height = document.getElementById("sxb").offsetHeight - document.getElementById("button").offsetHeight + 'px';
            document.getElementById("signature").style.width = document.getElementById("sxb").offsetWidth + 'px';

            var canvas = $('#signature').children()[0];
            var png = canvas.toDataURL("image/png")
            var width = document.getElementById("signature").offsetWidth;
            var height = document.getElementById("signature").offsetHeight;
            canvas.width = width;
            canvas.height = height;
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';
            //创建image对象
            var imgObj = new Image();
            imgObj.src = png;
            var ctx = canvas.getContext("2d");
            //待图片加载完后，将其显示在canvas上
            imgObj.onload = function () {
                ctx.strokeStyle = "#000";
                ctx.drawImage(this, (width - canvawidth) / 2, (height - canvaheight) / 2); //this即是imgObj,保持图片的原始大小：470*480
                ctx.restore();
                ctx.save();
            }

            //ctx.restore();
        })
    </script>
    <script type="text/javascript">
        var imagePath = "";
        var SavePC = "";
        var deptNo = "";
        var elementID = GetQueryString("ElementID");
        if (elementID!=null && elementID.indexOf("WorkCheck_") != -1)
            deptNo = elementID.replace("WorkCheck_", "");
        var user = new WebUser();
        $(document).on('ready', function () {
            $('.js-signature').jqSignature();
            document.getElementById("signature").style.width = document.getElementById("sxb").offsetWidth + 'px';
            var canvas = $('#signature').children()[0];
            //canvas.width = img.width;
            if (user.FK_Dept == "951979" || user.Name == "白晓春") {
                canvas.height = 860;
                canvas.style.height = "860px";
            } else {
                canvas.height = 360;
                canvas.style.height = "360px";
            }
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000";
            ctx.restore();
            //从缓存取出除父页面图片的二进制流
            InsertImg("");
        });

        function AddImg() {
            const inputEL = document.getElementById("inputImg");
            if (inputEL) inputEL.click();
        }

        function ComeBack() {
            window.screen.height = "100%";
            window.screen.width = "100%";
        }

        //插入
        //在input file内容改变的时候触发事件
        $('#inputImg').change(function () {
            //获取input file的files文件数组;
            //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
            //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
            var file = $('#inputImg').get(0).files[0];
            //创建用来读取此文件的对象
            var reader = new FileReader();
            //使用该对象读取file文件
            reader.readAsDataURL(file);
            //读取文件成功后执行的方法函数
            reader.onload = function (e) {
                //读取成功后返回的一个参数e，整个的一个进度事件
                console.log(e);
                //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                //转为base64编码格式的地址并加载到画布
                clearCanvas(0);
                InsertImg(e.target.result);
                //是否是插入的图片
                window.localStorage.setItem("InsertTmg", "true");

            }
        })
        //加载保存的签名
        function InsertImg(SavePC) {
            if (SavePC == "")
                SavePC = localStorage.getItem("writeImg");
            var img = new Image();
            var user = new WebUser();
            var canvas = $('#signature').children()[0];
            var ctx = canvas.getContext("2d");
            if (!SavePC) {
                img.src = "../../DataUser/Siganture/" + user.Name + ".png";
            } else {
                img.src = SavePC;
            }
            img.onload = function () {
                //img.width="50px";
                //img.height="100px";

                ctx.strokeStyle = "#000";
                ctx.drawImage(img, 0, 0, 600, 360);
                if (!SavePC) {
                    var data = new Date();
                    var day = data.getDate();
                    var day1 = data.getMonth() + 1;
                    ctx.restore();
                    ctx.beginPath();
                    ctx.textBaseline = "middle";
                    ctx.textAlign = "center";
                    ctx.font = "bold 20px 宋体";
                    ctx.fillText(day1 + "." + day, 600, 360);
                }
                ctx.restore();
                ctx.save();
            }
        }
        function clearCanvas(type) {
            if (type == 1) {
                window.parent.typecon = false;
            }
            //$('#signature').html('<p><em></em></p>');
            $('.js-signature').eq(0).jqSignature('clearCanvas');
            var canvas = $('#signature').children()[0]
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000";
            ctx.restore();
        }

        function clearsame() {
            if ($('#clr').attr('val') == 1) {
                var canvas = $('#signature').children()[0];
                canvas.style.cursor = 'crosshair';
                $('#clr').attr('val', '0');
                $('#xpc').text("橡皮擦");
            } else {
                var canvas = $('#signature').children()[0];
                canvas.style.cursor = 'url(Img/6.png)';


                $('#clr').attr('val', '1');
                $('#xpc').text("取消");
            }
        }


        function setfont() {
            $('.js-signature').jqSignature('setfont');
        }

        function isCanvasBlank(canvas) {
            var blank = document.createElement('canvas'); //系统获取一个空canvas对象
            blank.width = canvas.width;
            blank.height = canvas.height;
            return canvas.toDataURL() == blank.toDataURL(); //比较值相等则为空
        }

        function saveSignature() {
            window.parent.mrimg = false;
            var canvas = $('#signature').children()[0];
            if (isCanvasBlank(canvas)) {
                SavePC = '';
                window.parent.typecon = false;
            } else {
                $('#signature').empty();
                var pic = $('.js-signature').jqSignature('getDataURL');
                SavePC = pic;
                window.parent.typecon = true;
            }
            if (SavePC == "") {
                baocui(SavePC);
            } else {
                tailor(SavePC);
            }
        }

        $('.js-signature').eq(0).on('jq.signature.changed', function () {
            $('#saveBtn').attr('disabled', false);
        });
        /**
        * 裁剪空白区域
        * @param base64
        * @param callback
        */
        function tailor(base64) {
            var img = new Image();//创建图片对象
            img.src = base64;
            img.onload = function () {
                var c = document.createElement('canvas');//创建处理画布对象
                var ctx = c.getContext('2d');
                c.width = img.width;
                c.height = img.height;
                ctx.drawImage(img, 0, 0);//绘制
                var imgData = ctx.getImageData(0, 0, c.width, c.height).data;//读取图片数据
                var lOffset = c.width, rOffset = 0, tOffset = c.height, bOffset = 0;
                for (var i = 0; i < c.width; i++) {
                    for (var j = 0; j < c.height; j++) {
                        var pos = (i + c.width * j) * 4
                        if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) {
                            bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                            rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
                            tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                            lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        }
                    }
                }
                lOffset++;
                rOffset++;
                tOffset++;
                bOffset++;
                var x = document.createElement("canvas");//创建处理后画布对象
                x.width = rOffset - lOffset;
                x.height = bOffset - tOffset;
                var xx = x.getContext("2d");
                xx.drawImage(img, lOffset, tOffset, x.width, x.height, 0, 0, x.width, x.height);//绘制
                baocui(x.toDataURL());
            }
        }

        function baocui(SavePC) {
            
            //图片二进制流存入到缓存中
            window.localStorage.setItem("writeImg", SavePC);
            //console.log(SavePC+"pic=========");
            var writType = GetQueryString("WritType");
            // console.log(writType);
            if (writType != null && writType != undefined && writType == "WorkCheck") {
                //console.log("=============");
                parent.setHandWriteSrc("WorkCheck", SavePC, 1);
                return;
            }
            var newpic = SavePC.replace(/^data:image\/(png|jpg);base64,/, "");
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
            handler.AddPara("FK_Node", GetQueryString("FK_Node"));
            handler.AddPara("WorkID", GetQueryString("WorkID"));
            handler.AddPara("FK_Flow", GetQueryString("FK_Flow"));
            handler.AddPara("KeyOfEn", GetQueryString("KeyOfEn"));
            handler.AddPara("imageData", newpic);
            var data = handler.DoMethodReturnString("HandWriting_Save");
            if (data.indexOf('err@') == 0) {
                alert(data);
                imagePath = "";
                return;
            }
            if (data.indexOf('info@') == 0) {
                imagePath = data.replace('info@', '');
                parent.setHandWriteSrc(GetQueryString("KeyOfEn"), imagePath, 0);
            }
        }

    </script>
</body>
</html>
